<template>
  <div>
    <div class="demo-inner-divider">提示框</div>
    <div class="container">
      <div class="item">
        <e-tooltip content="top-left的提示1" place="top-left">
          <div class="area">TopLeft</div>
        </e-tooltip>
      </div>
      <div class="item">
        <e-tooltip  content="TOP提示dscdkvnfvojsdfsfsen" place="top">
          <div class="area">TOP</div>
        </e-tooltip>
      </div>
      <div class="item">
        <e-tooltip  content="LopRight提示" place="top-right">
          <div class="area">TR</div>
        </e-tooltip>
      </div>  
    </div>
    <div class="container" :style="{margin: '10px 100px'}">
      <div class="item">
        <e-tooltip content="left-top的提示文字提示" place="left-top">
          <div class="area">LT</div>
        </e-tooltip>
      </div>
      <div class="item">
        <e-tooltip  content="left提示文字提示文字" place="left">
          <div class="area">LEFT</div>
        </e-tooltip>
      </div>
      <div class="item">
        <e-tooltip  content="LeftBottom提示" place="left-bottom">
          <div class="area">LB</div>
        </e-tooltip>
      </div>  
    </div>
    <div class="container">
      <div class="item">
        <e-tooltip content="这里是提示" place="bottom-left">
          <div class="area">BL</div>
        </e-tooltip>
      </div>
      <div class="item">
        <e-tooltip  content="底部提示d" place="bottom">
          <div class="area">BOTTOM</div>
        </e-tooltip>
      </div>
      <div class="item">
        <e-tooltip  content="BottomRight提示" place="bottom-right">
          <div class="area">BR</div>
        </e-tooltip>
      </div>  
    </div>
    <div class="container">
      <div class="item">
        <e-tooltip content="right top 文字提示1" place="right-top">
          <div class="area">RT</div>
        </e-tooltip>
      </div>
      <div class="item">
        <e-tooltip  content="right提示1" place="right">
          <div class="area">Right</div>
        </e-tooltip>
      </div>
      <div class="item">
        <e-tooltip  content="Right Bottom提示" place="right-bottom">
          <div class="area">RB</div>
        </e-tooltip>
      </div>  
    </div>
    <div class="demo-inner-divider">提示框-背景</div>
    <div class="item">
      <e-tooltip content="黑色背景">
        <div class="my-area"></div>
      </e-tooltip>
    </div>
    <div class="item">
      <e-tooltip content="白色背景" light place="top-right">
        <div class="my-area"></div>
      </e-tooltip>
    </div>
    <div class="demo-inner-divider">提示框-slot</div>
    <div class="item">
      <e-tooltip content="使用slot" place="top-left">
        <e-icon type="enlarge" :size="15"></e-icon>
      </e-tooltip>
    </div>
    <div class="demo-inner-divider">提示框-内容带icon</div>
    <div class="item myWidth">
      <e-tooltip place="top-left" :width="100">
        <template v-slot:content>
          <e-icon type="bell" :size="15"></e-icon>这里是提示
        </template>
        <div class="my-area"></div>
      </e-tooltip>
    </div>
    <tooltip-md class="markdown-body"></tooltip-md>
  </div>
</template>

<script setup>
import tooltipMd from '../../docs/tooltip.md';
</script>
<style lang="less" scoped>
.container{
  // float: left;
  .my-area{
    width: 70px;
    height: 70px;
    background-color: plum;
  }
  .area{
    width: auto;
    height: auto;
    padding: 6px 20px;
    background-color: #f4f4f4;
  }
  .item{
    display: inline-block;
    margin:20px;
  }
}
.myWidth{
  .e-tooltip{
    .tip-content{
      color: red !important;;
      width: 120px!important;
    }
  }
}

</style>